<template>
  <div class="fenye">
    <a-pagination
      v-model:current="current"
      :total="total"
      :responsive="true"
      :showTotal="(total: number) => `共 ${total} 条`"
      @showSizeChange="handleSizeChange"
      @change="handleCurrentChange"
      show-size-changer
      :showQuickJumper="total / pageSize > 5"
      :pageSize="pageSize"
      v-bind="prop"
    ></a-pagination>
  </div>
</template>

<script setup lang="ts">
import { pick } from "ramda"
import { ref, watch } from "vue"
import { PageType } from "./UsePagination"

const { defaultConfig, search, ...props } = defineProps([
  "defaultConfig",
  "search",
  "total",
  "current",
  "pageSize",
  "showTotal",
  "pageSizeOptions",
  "showQuickJumper",
  "showSizeChanger",
])
/** 组件参数 */
const current = props.current
const total = props.total
const pageSize = props.pageSize
const prop = ref({})
watch(
  [() => props, () => defaultConfig],
  () => {
    const data = { ...props, ...defaultConfig }
    pageSize.value = data.pageSize
    prop.value = Object.fromEntries(
      Object.entries(
        pick(
          [
            "showTotal",
            "pageSizeOptions",
            "showQuickJumper",
            "showSizeChanger",
          ],
          data ?? {}
        )
      ).filter(([key, value]) => value !== undefined)
    )
  },
  {
    immediate: true,
  }
)
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"])
/** 事件处理 */
function handleSizeChange(index: number, size: number) {
  current.value = 1
  pageSize.value = size
  search()
  window.scrollTo({
    top: 0,
    behavior: "smooth", // 平滑滚动效果
  })
  emits("handleSizeChange", size)
}
function handleCurrentChange(index: number, size: number) {
  current.value = index
  pageSize.value = size
  search(PageType.new)
  window.scrollTo({
    top: 0,
    behavior: "smooth", // 平滑滚动效果
  })
  emits("handleCurrentChange")
}
</script>

<style scoped lang="scss">
.fenye {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.41);
  padding: 10px 0;
  border-radius: 4px;
  /* 背景模糊 */
  backdrop-filter: blur(9px);
  /* 兼容老版本 Safari */
  -webkit-backdrop-filter: blur(9px);
  position: relative;
  z-index: 9999;
  :deep(.ant-pagination) {
    .ant-pagination-item {
      border: none;
      &:hover {
        a {
          color: #fff;
          background-color: #ff375f;
        }
      }
    }
    .ant-pagination-item-active {
      // border-bottom: 1.5px solid rgba(0, 0, 0, 0.85) !important;
      border-radius: 4px;
      a {
        color: #fff !important;
        border-radius: 4px;
        background-color: #ff375f;
      }
    }
    .ant-pagination-next,
    .ant-pagination-prev,
    .ant-pagination-item {
      background-color: rgba($color: #d9d9d9, $alpha: 0.28);
      border-radius: 4px;
      /* 背景模糊 */
      backdrop-filter: blur(9px);
      /* 兼容老版本 Safari */
      -webkit-backdrop-filter: blur(9px);
      a {
        color: #000;
      }
    }
    .ant-pagination-next,
    .ant-pagination-prev {
      margin: 0 20px;

      a {
        border: 1px solid #d9d9d9 !important;
        &:hover,
        &:active {
          color: #fff;
        }
      }
    }
    .ant-pagination-disabled {
      a {
        color: rgba(0, 0, 0, 0.25) !important;
        border-color: #d9d9d9;
        cursor: not-allowed;
      }
    }
    .ant-pagination-total-text {
      color: #fff;
    }
  }
}
</style>
